<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-11 15:32:26
-->


<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component
        :is="Component"
        :key="$route.meta.title"
        v-if="$route.meta.keepAlive"
      />
    </keep-alive>
    <component
      :is="Component"
      :key="$route.meta.title"
      v-if="!$route.meta.keepAlive"
    />
  </router-view>
  <!-- 充值 -->
  <recharge></recharge>
  <HomeBtn ref="HomeBtn" />
</template>



<script >
import {
  defineComponent,
  nextTick,
  onMounted,
  ref,
  watch,
  watchEffect,
} from "vue";
import recharge from "@/components/recharge.vue";
import { useRouter } from "vue-router";
export default defineComponent({
  components: {
    recharge,
  },
  setup() {
    const router = useRouter();
    const HomeBtn = ref();

    watch(
      () => router.currentRoute.value.path,
      (v) => {
        setTimeout(() => {
          if (HomeBtn.value) {
            HomeBtn.value.path = v;
          }
        }, 100);
      }
    );
    return {
      HomeBtn,
    };
  },
});
</script>


<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 12px;
}
::v-deep(.van-hairline--bottom:after) {
  display: none;
}
</style>
